<!DOCTYPE html>
<html>
<head>
  <title>生成PWA图标</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      text-align: center;
    }
    .canvas-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
      margin: 20px 0;
    }
    .icon-container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    button {
      margin: 10px;
      padding: 10px 20px;
      font-size: 16px;
    }
    h1 {
      color: #333;
    }
    .instructions {
      max-width: 600px;
      margin: 20px auto;
      text-align: left;
      line-height: 1.6;
      background-color: #f5f5f5;
      padding: 15px;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <h1>PWA 图标生成器</h1>
  
  <div class="instructions">
    <h2>使用说明：</h2>
    <ol>
      <li>点击下面的"下载所有图标"按钮</li>
      <li>将下载的图标文件保存到 public 文件夹中</li>
      <li>图标名称必须保持为: pwa-192x192.png, pwa-512x512.png, apple-touch-icon.png</li>
      <li>重新构建并部署您的应用</li>
    </ol>
  </div>

  <div class="canvas-container">
    <div class="icon-container">
      <canvas id="canvas192" width="192" height="192"></canvas>
      <p>192x192</p>
    </div>
    <div class="icon-container">
      <canvas id="canvas512" width="512" height="512"></canvas>
      <p>512x512</p>
    </div>
    <div class="icon-container">
      <canvas id="canvasApple" width="180" height="180"></canvas>
      <p>Apple Touch Icon (180x180)</p>
    </div>
  </div>
  <div>
    <button id="downloadAll">下载所有图标</button>
  </div>

  <script>
    // 初始化画布
    function initCanvas(canvasId, size, color) {
      const canvas = document.getElementById(canvasId);
      const ctx = canvas.getContext('2d');
      
      // 背景色
      ctx.fillStyle = '#ffffff';
      ctx.fillRect(0, 0, size, size);
      
      // 绘制圆形图标
      ctx.fillStyle = color;
      ctx.beginPath();
      ctx.arc(size/2, size/2, size*0.4, 0, Math.PI * 2);
      ctx.fill();
      
      // 绘制字母 "A" (示例)
      ctx.fillStyle = '#ffffff';
      ctx.font = `bold ${size*0.5}px Arial`;
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText('A', size/2, size/2);
      
      return canvas;
    }
    
    // 下载单个图标
    function downloadCanvas(canvas, filename) {
      const link = document.createElement('a');
      link.download = filename;
      link.href = canvas.toDataURL('image/png');
      link.click();
    }
    
    // 初始化所有画布
    const canvas192 = initCanvas('canvas192', 192, '#4285f4');
    const canvas512 = initCanvas('canvas512', 512, '#4285f4');
    const canvasApple = initCanvas('canvasApple', 180, '#4285f4');
    
    // 下载所有图标
    document.getElementById('downloadAll').addEventListener('click', () => {
      downloadCanvas(canvas192, 'pwa-192x192.png');
      setTimeout(() => downloadCanvas(canvas512, 'pwa-512x512.png'), 100);
      setTimeout(() => downloadCanvas(canvasApple, 'apple-touch-icon.png'), 200);
      alert('图标已下载完成！请将它们放到项目的 public 文件夹中');
    });
  </script>
</body>
</html> 